<template>
  <div id="TrainingPlan">
    <div style="width: 1300px">
      <a-form layout="inline">
        <a-form-item label="关键字" class="searchItem">
          <a-input v-model="keyword" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="课程" class="searchItem">
          <a-select v-model="keyword" style="width: 180px;" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="">
          <a-button type="primary" @click="getData">查询 </a-button>
          <a-button type="primary" style="margin-left: 10px;" @click="addbtn(record)">新增</a-button>
        </a-form-item>
      </a-form>
    </div>
    <a-table
      bordered
      :scroll="{ y: 600 }"
      :columns="columns"
      style="margin-top: 16px"
      :data-source="tableData"
      :pagination="tablePagination"
      :rowKey="(record, index) => record.key"
    >
      <template slot="name" slot-scope="text, record">
        <a-tooltip placement="top" v-if="record.name">
          <template slot="title">
            <span>{{ record.name }}</span>
          </template>
          <span style="cursor: default">{{ record.name }}</span>
        </a-tooltip>
        <span v-else-if="!record.name">—</span>
      </template>
      <template slot="tapdProjectId" slot-scope="text, record">
        <a-tooltip placement="top" v-if="record.tapdProjectId">
          <template slot="title">
            <p>{{ record.tapdProjectId }}</p>
          </template>
          <span style="cursor: default">{{ record.tapdProjectId }}</span>
        </a-tooltip>
        <span v-else-if="!record.tapdProjectId">—</span>
      </template>
      <template slot="operation" slot-scope="text, record">
        <div>
          <a-button
            type="primary"
            style="margin-left: 10px"
            @click="editClick(record)"
            >修改</a-button
          >
          <a-button
            type="danger"
            style="margin-left: 10px"
            @click="deleteClick(record)"
            >删除</a-button
          >
        </div>
      </template>
    </a-table>
    <a-modal v-model="visible" :title="title">
      <a-form-model
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
        ref="formRef"
        :model="form"
        :rules="rules"
      >
        <a-form-model-item label="课程名称" prop="courseName">
          <a-input v-model="form.courseName" />
        </a-form-model-item>
        <a-form-model-item label="开课老师" prop="teacher">
          <a-input v-model="form.teacher" />
        </a-form-model-item>
        <a-form-model-item label="开课时间" prop="time">
          <a-date-picker v-model="form.time" style="width: 236px" />
        </a-form-model-item>
        <a-form-model-item label="训练计划" prop="Name">
          <a-select v-model="form.Name">
            <a-select-option
              v-for="item in NameList"
              :key="item.id"
              :value="item.name"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-model-item>
      </a-form-model>
      <template slot="footer">
        <a-button key="back" class="modalCancel" @click="handleCancel"
          >取消</a-button
        >
        <a-button key="submit" @click="primaryClick" type="primary">
          确定
        </a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>
import CourseInf from "@/components/LessonPlan/CourseInf.vue";
import StudentInf from "@/components/LessonPlan/StudentInf.vue";
import LessonPlan from "@/components/LessonPlan/index.vue";
import moment from "moment";
export default {
  components: {
    CourseInf,
    StudentInf,
    LessonPlan,
  },
  data() {
    return {
      NameList: [
        {
          id: 1,
          name: "zwk",
        },
      ],
      keyword: null, //关键字
      form: {
        id: null,
        courseName: "", // 课程名称
        teacher: "", //开课老师
        time: "", //开课时间
        Name: "", //训练计划
      },
      rules: {
        courseName: [
          { required: true, message: "请输入课程名称", trigger: "blur" },
        ],
        teacher: [
          { required: true, message: "请输入开课老师", trigger: "blur" },
        ],
        time: [{ required: true, message: "请输入开课时间", trigger: "blur" }],
        Name: [{ required: true, message: "请输入训练计划", trigger: "blur" }],
      },
      visible: false,
      title: null,
      columns: [
        //主页table列的配置
        {
          title: "序列号",
          dataIndex: "id",
          scopedSlots: { customRender: "id" },
        },
        {
          title: "科目名称",
          dataIndex: "name",
          customRender: (text, record) => {
            return record.name ? record.name : "—";
          },
        },
        {
          title: "路径",
          dataIndex: "url",
          customRender: (text, record) => {
            return record.url ? record.url : "—";
          },
        },
        {
          title: "操作",
          width: 300,
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" },
        },
      ],
      tableData: [
        //主页表格的数据
      ],
      tablePagination: {
        //主页表格的分页器
        total: 0,
        current: 1,
        size: "10",
        showQuickJumper: true, //是否可以快速跳转至某页
        showSizeChanger: true, //是否可以改变 pageSize
      },
    };
  },
  created() {
    this.getData();
  },
  computed: {},
  methods: {
    async getData() {
      let data = await this.$axios.get("/sys/subject/page", {
        // params: {
        //   page: this.tablePagination.current,
        //   limit: this.tablePagination.size,
        //   coursePlanName: this.keyword, //关键字(也是课程计划名)
        // },
      });
      // data.response.forEach((item, index) => {
      //   item.key = item.id;
      //   let arr = [];
      //   if (item.subjectList && item.subjectList.length > 0) {
      //     item.subjectList.forEach((itemBox, itemBoxInd) => {
      //       arr.push({
      //         key: itemBox.id,
      //         courseName: itemBox.name,
      //         teacher: item.teacher,
      //         time: item.time,
      //         Name: item.Name,
      //       });
      //     });
      //     item.children = arr;
      //   }
      // });
      this.tableData = data.response;
      this.tablePagination.total = data.response.length;
    },
    editClick(row) {
      //编辑
      for (let i in row) {
        if (i in this.form && i != "time") {
          this.form[i] = row[i];
        }
      }
      this.form.time = row.time ? moment(row.time).format("YYYY-MM-DD") : null;
      this.title = "编辑";
      this.visible = true;
    },
    addbtn(row) {
      //新增
      for (let i in row) {
        if (i in this.form && i != "time") {
          this.form[i] = row[i];
        }
      }
      this.form.time = row.time ? moment(row.time).format("YYYY-MM-DD") : null;
      this.title = "新增";
      this.visible = true;
    },
    handleCancel() {
      this.visible = false;
    },
    primaryClick() {
      this.$nextTick(() => {
        this.$refs.formRef.validate((valid) => {
          if (valid) {
            let data = {
              courseId: this.form.id,
              courseName: this.form.courseName, // 课程名称
              teacher: this.form.teacher, //开课老师
              time: this.form.time, //开课时间
              Name: this.form.Name, //训练计划
            };
            if (this.title == "新增") {
              this.$axios.put("/sys/courseplane", data).then((res) => {
                this.$message.success("新增成功");
                this.getData();
                this.visible = false; // 关闭模态框
              });
            }
          } else {
            console.log("校验失败");
          }
        });
      });
    },
    deleteClick(row) {
      //点击删除
      let data = {
        ids: row.id,
      };
      let that = this;
      this.$confirm({
        title: "确认删除?",
        content: "您确定要删除此项吗?",
        onOk() {
          that.$axios.delete("/sys/coursePlan", data).then((res) => {
            that.$message.success("删除成功");
            that.getData();
          });
        },
        onCancel() {
          console.log("取消删除");
        },
      });
    },
  },
};
</script>
<style scoped>
#TrainingPlan {
  padding: 24px 32px;
  margin: 30px 20px 0 20px;
  border-radius: 2px;
}
</style>
<style lang="scss">
#TrainingPlan {
  height: 800px;
  background: url("~@/assets/img/tableDataBg.png") repeat 100% !important;
  background-size: cover !important;
}
</style>